<template>
    <div class="index w">
        <!-- 歌单推荐 -->
        <div class="songlist">
            <div class="title">歌单推荐</div>
            <div class="dt" v-if="songlistDt != null">
                <span
                :key="item"
                v-for="item in 6"
                @click="toggleSongListDtStyle(songlistDt[item - 1].name)"
                :class="currentSongListDt == songlistDt[item - 1].name ? 'current-style' : ''"
                >{{songlistDt[item - 1].name}}</span>
            </div>
            <div ref="songlistdd" class="dd" v-if="songListDdData != null">
                <div
                @click="playSongListAll(item.id)"
                :key="item.coverImgUrl"
                v-for="item in songListDdData"
                class="dd-item">
                    <div class="pic">
                        <div class="mask">
                            <span class="iconfont">&#xe682;</span>
                        </div>
                        <img :src="item.coverImgUrl">
                    </div>
                    <div @click="jumpPlayListInfo(item.id)" class="songlist-name">{{item.name}}</div>
                    <div class="song-play-number">播放量：{{item.playCount}}</div>
                </div>
            </div>
            <div class="circle">
                <span @click="toggleCurrentSonglistDdPage(1)" :class="currentSonglistDdPage == 1 ? 'circle-current' : ''" class="circle-item"></span>
                <span @click="toggleCurrentSonglistDdPage(2)" :class="currentSonglistDdPage == 2 ? 'circle-current' : ''" class="circle-item"></span>
            </div>
        </div>

        <!-- 新歌首发 -->
        <div class="newSong">
            <div class="songlist">
                <div class="title">新歌首发（精选）</div>
                <div class="dt">
                    <div @click="playSongAll" class="playAll">
                        <span class="iconfont">&#xe682;</span>
                        播放全部
                    </div>
                    <span
                    @click="toggleNewSongStyle(7)"
                    :class="newSongDt == 7 ? 'current-style' : ''"
                    >华语</span>
                    <span
                    @click="toggleNewSongStyle(96)"
                    :class="newSongDt == 96 ? 'current-style' : ''"
                    >欧美</span>
                    <span
                    @click="toggleNewSongStyle(8)"
                    :class="newSongDt == 8 ? 'current-style' : ''"
                    >日本</span>
                    <span
                    @click="toggleNewSongStyle(16)"
                    :class="newSongDt == 16 ? 'current-style' : ''"
                    >韩国</span>
                </div>
               <div class="newSong-dd" v-if="newSongDdData != null">
                   <div
                   :key="index"
                   v-for="(item, index) in 9"
                   class="dd-item">
                       <div class="pic">
                           <div @click="playSong(newSongDdData[item - 1])" class="mask">
                               <span class="iconfont">&#xe682;</span>
                           </div>
                           <img :src="newSongDdData[item - 1].album.picUrl">
                       </div>
                       <div class="info">
                           <div class="songname">{{newSongDdData[item - 1].name}}</div>
                           <div @click="jumpSinger(newSongDdData[item - 1].album.artists[0].id)" class="author">{{newSongDdData[item - 1].album.artists[0].name}}</div>
                       </div>
                       <div class="time">{{newSongDdData[item - 1].hMusic.playTime | songTimer}}</div>
                   </div>
               </div>
            </div>
        </div>

        <!-- 精彩推荐 -->
        <div class="select" v-if="selectBanner != null">
            <div class="title">精彩推荐</div>
            <el-carousel :interval="5000" arrow="always">
                <el-carousel-item v-for="item in selectBanner" :key="item.imageUrl">
                    <img :src="item.imageUrl">
                </el-carousel-item>
            </el-carousel>
        </div>

        <!-- 排行榜 -->
        <div class="top">
            <div class="title">排行榜</div>
            <div class="top-wrap">
                <div class="top-item item1" v-if="hotTopSong != null">
                    <div class="top-dt">巅峰榜</div>
                    <div class="top-dd">热歌</div>
                    <div class="xian">
                        <span class="xiantiao"></span>
                        <span @click="playSongTopAll(hotTopSong)" class="iconfont">&#xe682;</span>
                    </div>
                    <div class="top-list">
                        <div
                        :key="item"
                        v-for="item in 3"
                        class="list-item">
                            <div class="number">{{item}}</div>
                            <div class="info">
                                <div class="songname">{{hotTopSong[item - 1].name}}</div>
                                <div class="author">{{hotTopSong[item - 1].ar[0].name}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="top-item item2" v-if="newTopSong != null">
                    <div class="top-dt">巅峰榜</div>
                    <div class="top-dd">新歌</div>
                    <div class="xian">
                        <span class="xiantiao"></span>
                        <span @click="playSongTopAll(newTopSong)" class="iconfont">&#xe682;</span>
                    </div>
                    <div class="top-list">
                        <div
                        :key="item"
                        v-for="item in 3"
                        class="list-item">
                            <div class="number">{{item}}</div>
                            <div class="info">
                                <div class="songname">{{newTopSong[item - 1].name}}</div>
                                <div class="author">{{newTopSong[item - 1].ar[0].name}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="top-item item3" v-if="lxTopSong != null">
                    <div class="top-dt">巅峰榜</div>
                    <div class="top-dd">流行指数</div>
                    <div class="xian">
                        <span class="xiantiao"></span>
                        <span @click="playSongTopAll(lxTopSong)" class="iconfont">&#xe682;</span>
                    </div>
                    <div class="top-list">
                        <div
                        :key="item"
                        v-for="item in 3"
                        class="list-item">
                            <div class="number">{{item}}</div>
                            <div class="info">
                                <div class="songname">{{lxTopSong[item - 1].name}}</div>
                                <div class="author">{{lxTopSong[item - 1].ar[0].name}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="top-item item4" v-if="omTopSong != null">
                    <div class="top-dt">巅峰榜</div>
                    <div class="top-dd">欧美</div>
                    <div class="xian">
                        <span class="xiantiao"></span>
                        <span @click="playSongTopAll(omTopSong)" class="iconfont">&#xe682;</span>
                    </div>
                    <div class="top-list">
                        <div
                        :key="item"
                        v-for="item in 3"
                        class="list-item">
                            <div class="number">{{item}}</div>
                            <div class="info">
                                <div class="songname">{{omTopSong[item - 1].name}}</div>
                                <div class="author">{{omTopSong[item - 1].ar[0].name}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="top-item item5" v-if="hgTopSong != null">
                    <div class="top-dt">巅峰榜</div>
                    <div class="top-dd">韩国</div>
                    <div class="xian">
                        <span class="xiantiao"></span>
                        <span @click="playSongTopAll(hgTopSong)" class="iconfont">&#xe682;</span>
                    </div>
                    <div class="top-list">
                        <div
                        :key="item"
                        v-for="item in 3"
                        class="list-item">
                            <div class="number">{{item}}</div>
                            <div class="info">
                                <div class="songname">{{hgTopSong[item - 1].name}}</div>
                                <div class="author">{{hgTopSong[item - 1].ar[0].name}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- MV -->
        <div class="mv">
            <div class="songlist">
                <div class="title">MV</div>
                <div class="dt">
                    <span
                    @click="toggleMV('内地')"
                    :class="currentMV == '内地' ? 'current-style' : ''"
                    >内地</span>
                    <span
                    @click="toggleMV('韩国')"
                    :class="currentMV == '韩国' ? 'current-style' : ''"
                    >韩国</span>
                    <span
                    @click="toggleMV('港台')"
                    :class="currentMV == '港台' ? 'current-style' : ''"
                    >港台</span>
                    <span
                    @click="toggleMV('欧美')"
                    :class="currentMV == '欧美' ? 'current-style' : ''"
                    >欧美</span>
                    <span
                    @click="toggleMV('日本')"
                    :class="currentMV == '日本' ? 'current-style' : ''"
                    >日本</span>
                </div>
                <div class="ddmv" v-if="mvData != null">
                    <div
                    :key="item.name"
                    v-for="item in mvData"
                    class="dd-item">
                        <div class="pic">
                            <div @click="jumpMVInfo(item.id)" class="mask">
                                <span class="iconfont">&#xe682;</span>
                            </div>
                            <img :src="item.cover">
                        </div>
                        <div @click="jumpMVInfo(item.id)" class="mvname">{{item.name}}</div>
                        <div @click="jumpSinger(item.artists[0].id)" class="author">{{item.artistName}}</div>
                        <div class="number">
                            <span class="iconfont">&#xe609;</span>
                            {{item.playCount}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 歌单推荐-dt
            songlistDt: null,
            // 当前所在歌单推荐
            currentSongListDt: '华语',
            // 歌单推荐dd数据
            songListDdData: null,
            // 当前所在dd数据页数
            currentSonglistDdPage: 1,
            // 当前所在新歌首发
            newSongDt: 7,
            // 当前所在新歌首发数据
            newSongDdData: null,
            // 精彩推荐banner
            selectBanner: null,
            // 热歌排行榜
            hotTopSong: null,
            // 新歌排行榜
            newTopSong: null,
            // 流行排行榜
            lxTopSong: null,
            // 欧美排行榜
            omTopSong: null,
            // 韩国排行榜
            hgTopSong: null,
            // 当前所在MV
            currentMV: '内地',
            // MV数据
            mvData: null
        }
    },
    mounted() {
        this.getSongListDt();
        this.getNewSongData();
        this.getSelectBanner();
        this.getTopSongData();
        this.getMVData();
    },
    filters: {
        // 时长过滤器
        songTimer(data) {
            let time = new Date(data); 
            return time.toString().split(' ')[4].toString().split('08:')[1];
        }
    },
    methods: {
        // 获取歌单推荐-dt
        async getSongListDt() {
            let { data: res } = await this.$http.get('/playlist/hot');
            this.songlistDt = res.tags;
            this.currentSongListDt = res.tags[0].name;
            this.getSongListDdData();
        },
        // 切换歌单推荐-dt的样式，跟数据
        toggleSongListDtStyle(name) {
            this.currentSongListDt = name;
            this.songListDdData = null;
            this.currentSonglistDdPage = 1;
            this.getSongListDdData();
        },
        // 获取歌单推荐dd的数据
        async getSongListDdData() {
            let { data: res } = await this.$http.get('/top/playlist', { params: { cat: this.currentSongListDt, limit: 10 } });
            this.songListDdData = res.playlists;
        },
        // 切换歌单推荐dd页数数据
        toggleCurrentSonglistDdPage(page) {
            this.currentSonglistDdPage = page;

            if (page == 1) {
               this.getSongListDdData();
            }

            if (page == 2) {
                for(var i = 0, j = this.songListDdData.length - 1; i < j; i++, j--) {
                    var temp = this.songListDdData[i];
                    this.songListDdData[i] = this.songListDdData[j];
                    this.songListDdData[j] = temp;
                }
            }
            
        },
        // 切换新歌首发dt的样式，跟数据
        toggleNewSongStyle(name) {
            this.newSongDt = name;
            this.newSongDdData = null;
            this.getNewSongData();
        },
        // 获取新歌数据
        async getNewSongData() {
            let { data: res } = await this.$http.get('/top/song', { params: { type: this.newSongDt } });
            this.newSongDdData = res.data;
        },
        // 获取精彩推荐Banner
        async getSelectBanner() {
            let { data: res } = await this.$http.get('/banner', { params: { type: 0 } });
            this.selectBanner = res.banners;
        },
        // 获取排行榜数据
        async getTopSongData() {
            let { data: hot } = await this.$http.get('/top/list', { params: { id: 3778678 } });
            this.hotTopSong = hot.playlist.tracks;

            let { data: newSong } = await this.$http.get('/top/list', { params: { id: 3779629 } });
            this.newTopSong = newSong.playlist.tracks;

            let { data: lx } = await this.$http.get('/top/list', { params: { id: 19723756 } });
            this.lxTopSong = lx.playlist.tracks;

            let { data: om } = await this.$http.get('/top/list', { params: { id: 2809513713 } });
            this.omTopSong = om.playlist.tracks;

            let { data: hg } = await this.$http.get('/top/list', { params: { id: 745956260 } });
            this.hgTopSong = hg.playlist.tracks;
        },
        // 切换当前所在MV
        toggleMV(name) {
            this.currentMV = name;
            this.getMVData();
        },
        // 获取MV数据
        async getMVData() {
            let { data: res } = await this.$http.get('/top/mv', { params: { limit: 10, area: this.currentMV } });
            this.mvData = res.data;
        },
        // 播放歌曲
        playSong(item) {
            this.$emit('playSong', item.id);
        },
        // 播放全部新歌曲
        playSongAll() {
            this.$emit('playSongAll', this.newSongDdData);
        },
        // 播放推荐歌单全部歌曲
        async playSongListAll(id) {
            let { data: res } = await this.$http.get('/playlist/detail', { params: { id } });
            this.$emit('playSongAll', res.playlist.tracks);
            this.$router.push(`/playlist/info/${id}`);
        },
        // 播放top榜所有歌曲
        playSongTopAll(all) {
            this.$emit('playSongAll', all);
        },
        // 跳转到歌手页面
        async jumpSinger(id) {
            this.$router.push(`/singer/info/${id}`);
        },
        // 跳转到歌单详情
        jumpPlayListInfo(id) {
            this.$router.push(`/playlist/info/${id}`);
        },
        // 跳转到MV详情
        jumpMVInfo(id) {
            this.$router.push(`/mv/info/${id}`);
        }
        
    }
}
</script>

<style lang="less" scoped>

.songlist {
    padding-bottom: 12px;
    border-bottom: 6px solid #fff;
    .title {
        height: 116px;
        line-height: 116px;
        text-align: center;
        font-size: 26px;
        font-weight: 700;
        letter-spacing: 10px;
        color: #333;
    }
    .dt {
        position: relative;
        height: 46px;
        text-align: center;
        span {
            margin-right: 50px;
            font-size: 14px;
            color: #333;
            cursor: pointer;
            &:hover {
                color: #3ec481;
            }
        }
    }
    .dd {
        width: 20000px;
        display: flex;
        .dd-item {
            width: 200px;
            margin-right: 50px;
            .pic {
                position: relative;
                width: 100%;
                height: 220px;
                cursor: pointer;
                overflow: hidden;
                &:hover .mask {
                    display: block;
                }
                &:hover img {
                    transform: scale(1.1);
                }
                .mask {
                    display: none;
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(0, 0, 0, .3);
                    z-index: 9999;
                    &:hover .iconfont{
                        font-size: 60px;
                        opacity: 1;
                    }
                    .iconfont {
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                        color: #fff;
                        font-size: 10px;
                        opacity: 0;
                        font-weight: 700;
                        transition: all .3s linear;
                    }
                }
                img {
                    transition: all .6s;
                    width: 100%;
                    height: 100%;
                }
            }
            .songlist-name {
                font-size: 14px;
                color: #000;
                margin: 6px 0;
                cursor: pointer;
                &:hover {
                    color: #3ec481;
                }
            }
            .song-play-number {
                font-size: 14px;
                color: #999;
            }
        }
    }
    .circle {
        text-align: center;
        margin-top: 12px;
        .circle-item {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #e1e1e1;
            cursor: pointer;
            margin-right: 20px;
        }
        .circle-current {
            background-color: #afafaf!important;
        }
    }
}

.current-style {
    color: #3ec481!important;
}

.newSong {
    .playAll {
        position: absolute;
        left: 0;
        top: 0;
        padding: 0 20px;
        height: 34px;
        line-height: 34px;
        border: 1px solid #c9c9c9;
        font-size: 14px;
        letter-spacing: 2px;
        cursor: pointer;
        .iconfont {
            margin: 0;
        }
        &:hover {
            background-color: #ededed;
            color: #333;
        }
    }
    .newSong-dd {
        margin-top: 30px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        .dd-item {
            width: 31.33%;
            border-bottom: 1px solid #ccc;
            padding-bottom: 20px;
            display: flex;
            height: 82px;
            margin-bottom: 10px;
            .pic {
                position: relative;
                width: 87px;
                height: 82px;
                cursor: pointer;
                overflow: hidden;
                &:hover .mask {
                    display: block;
                }
                &:hover img {
                    transform: scale(1.1);
                }
                .mask {
                    display: none;
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(0, 0, 0, .3);
                    z-index: 9999;
                    &:hover .iconfont{
                        font-size: 40px;
                        opacity: 1;
                    }
                    .iconfont {
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                        color: #fff;
                        font-size: 10px;
                        opacity: 0;
                        font-weight: 700;
                        transition: all .3s linear;
                    }
                }
                img {
                    transition: all .6s;
                    width: 100%;
                    height: 100%;
                }
            }
            .time {
                flex: 2;
                line-height: 83px;
                color: #999;
                text-align: right;
            }
            .info {
                flex: 5;
                display: flex;
                height: 100%;
                flex-direction: column;
                margin-top: 22px;
                margin-left: 20px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                .songname,
                .author {
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    cursor: pointer;
                    &:hover {
                        color: #5acc93;
                    }
                }
                .songname {
                    font-size: 16px;
                    color: #333;
                }
                .author {
                    font-size: 14px;
                    color: #999;
                    margin-top: 6px;
                }
            }
        }
    }
}

.select {
    .title {
        height: 116px;
        line-height: 116px;
        text-align: center;
        font-size: 26px;
        font-weight: 700;
        letter-spacing: 10px;
        color: #333;
    }
    .el-carousel {
        img {
            width: 100%;
            height: 100%;
        }
    }
}

.top {
    .title {
        height: 116px;
        line-height: 116px;
        text-align: center;
        font-size: 26px;
        font-weight: 700;
        letter-spacing: 10px;
        color: #333;
    }
    .top-wrap {
        display: flex;
        justify-content: space-between;
        .top-item {
            width: 18%;
            height: 500px;
            &:hover .xian .iconfont {
                display: block;
            }
            &:hover .xian .xiantiao {
                display: none;
            }
            .top-dt {
                margin-top: 46px;
                font-size: 22px;
                color: #fff;
                text-align: center;
                letter-spacing: 4px;
                font-weight: 400;
            }
            .top-dd {
                margin-top: 6px;
                font-size: 26px;
                color: #fff;
                text-align: center;
                letter-spacing: 4px;
            }
        }
        .item1 {
            background-color: #c96988;
        }
        .item2 {
            background-color: #6e98b0;
        }
        .item3 {
            background-color: #72c4ba;
        }
        .item4 {
            background-color: #549092;
        }
        .item5 {
            background-color: #e39b73;
        }
        .xian {
            height: 80px;
            line-height: 80px;
            text-align: center;
            .xiantiao {
                display: inline-block;
                width: 60px;
                height: 4px;
                background-color: #fff;
            }
            .iconfont {
                display: none;
                font-size: 50px;
                color: #fff;
                cursor: pointer;
            }
        }
        .top-list {
            .list-item {
                padding: 0 26px;
                display: flex;
                color: #fff;
                margin-bottom: 22px;
                .number {
                    flex: 1;
                }
                .info {
                    flex: 5;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden; 
                    .songname,
                    .author {
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        font-size: 14px;
                    }
                    .author {
                        margin-top: 6px;
                    }
                }
            }
        }
    }
}

.mv {
    .ddmv {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .dd-item {
            width: 18%!important;
            margin-bottom: 16px;
            .pic {
                position: relative;
                cursor: pointer;
                height: 124px;
                overflow: hidden;
                margin-bottom: 12px;
                &:hover .mask {
                    display: block;
                }
                &:hover img {
                    transform: scale(1.1);
                }
                .mask {
                    display: none;
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(0, 0, 0, .3);
                    z-index: 9999;
                    &:hover .iconfont{
                        font-size: 40px;
                        opacity: 1;
                    }
                    .iconfont {
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                        color: #fff;
                        font-size: 10px;
                        opacity: 0;
                        font-weight: 700;
                        transition: all .3s linear;
                    }
                }
                img {
                    width: 100%!important;
                    height: 100%;
                    transition: all .6s;
                }
            }
            .mvname {
                color: #3d3d3d;
                font-size: 14px;
            }
            .mvname,
            .author {
                cursor: pointer;
                &:hover {
                    color: #48c686;
                }
            }
            .author,
            .number {
                color: #999;
                font-size: 14px;
            }
            .author {
                margin: 4px 0;     
            }
        }
    }
}
</style>